<template>
  <div>
    <Card shadow>
      <Row :gutter="8">
        <Col :xs="24" :sm="24" :md="8" :lg="4">
        <vxe-table
          resizable
          :show-header="false"
          ref="tree"
          row-id="menuId"
          @cell-click="cellClickEvent"
          :tree-config="{children: 'children',expandAll: true}"
          :data.sync="data">
          <vxe-table-column minWidth="300" field="operation" tree-node>
            <template v-slot="{ row }">
              <Badge v-if="row.status===1" status="success"/>
              <Badge v-else="" status="error"/>
              <Icon :type="row.icon" size="16"/>
              <span style="margin-left:8px;margin-right: 8px">{{ row.menuName }}</span>
            </template>
          </vxe-table-column>
        </vxe-table>
        </Col>
        <Col :xs="24" :sm="24" :md="16" :lg="9">
        <div class="table-operator">
          <ButtonGroup>
            <Button type="primary" :disabled="$auth('systemMenuEdit')?false:true" @click="setEnabled(true)">新增菜单权限

            </Button>
            <Button
              type="primary"
              :disabled="formItem.menuId && $auth('systemMenuEdit')?false:true"
              @click="handleRemove">删除
            </Button>
          </ButtonGroup>
        </div>
        <Form ref="menuForm" :model="formItem" :rules="formItemRules" :label-width="80">
          <FormItem label="上级菜单" prop="parentId">
            <treeselect
              v-model="formItem.parentId"
              :options="selectTreeData"
              :default-expand-level="1"
              :normalizer="treeSelectNormalizer"/>
          </FormItem>
          <FormItem label="菜单编码" prop="menuCode">
            <Input v-model="formItem.menuCode" placeholder="请输入内容"></Input>
          </FormItem>
          <FormItem label="菜单名称" prop="menuName">
            <Input v-model="formItem.menuName" placeholder="请输入内容"></Input>
          </FormItem>
          <FormItem label="页面地址" prop="path">
            <Input v-model="formItem.path" placeholder="请输入内容">
            <Select v-model="formItem.scheme" slot="prepend" style="width: 80px">
              <Option value="/">/</Option>
              <Option value="http://">http://</Option>
              <Option value="https://">https://</Option>
            </Select>
            <Select v-model="formItem.target" slot="append" style="width: 100px">
              <Option value="_self">窗口内打开</Option>
              <Option :disabled="formItem.scheme==='/'" value="_blank">新窗口打开</Option>
            </Select>
            </Input>
            <span v-if="formItem.scheme === '/'">前端组件：/view/module/{{ formItem.path }}.vue</span>
            <span v-else="">跳转地址：{{ formItem.scheme }}{{ formItem.path }}</span>
          </FormItem>
          <FormItem label="图标">
            <Input v-model="formItem.icon" placeholder="请输入内容">
            <Icon size="22" :type="formItem.icon" slot="prepend"/>
            <Poptip width="600" slot="append" placement="bottom">
              <Button icon="ios-search"></Button>
              <div slot="content">
                <icon-selector v-model="formItem.icon" @change="handleIconChange"/>
              </div>
            </Poptip>
            </Input>
          </FormItem>
          <FormItem label="优先级">
            <InputNumber v-model="formItem.priority"></InputNumber>
          </FormItem>
          <FormItem label="状态">
            <RadioGroup v-model="formItem.status" type="button">
              <Radio :label="0">禁用</Radio>
              <Radio :label="1">正常</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="描述">
            <Input v-model="formItem.menuDesc" type="textarea" placeholder="请输入内容"></Input>
          </FormItem>
          <FormItem>
            <Button @click="handleSubmit" :loading="saving" type="primary">保存</Button>
            <Button @click="setEnabled(true)" style="margin-left: 8px">重置</Button>
          </FormItem>
        </Form>
        </Col>
        <Col :xs="24" :sm="24" :md="16" :lg="11">
        <menu-action :value="formItem"></menu-action>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
import MenuAction from './menu-action.vue'
import IconSelector from '@/components/icon-selector'
export default {
  name: 'SystemMenu',
  components: {
    MenuAction,
    IconSelector
  },
  data () {
    const validateEn = (rule, value, callback) => {
      const reg = /^[_a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('菜单编码不能为空'))
      } else if (value !== '' && !reg.test(value)) {
        callback(new Error('只允许字母、数字、下划线'))
      } else {
        callback()
      }
    }
    return {
      confirmModal: false,
      saving: false,
      visible: false,
      selectTreeData: [{
        menuId: 0,
        menuName: '无'
      }],
      formItemRules: {
        parentId: [
          { required: true, message: '上级菜单', trigger: 'blur' }
        ],
        menuCode: [
          { required: true, validator: validateEn, trigger: 'blur' }
        ],
        menuName: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ]
      },
      formItem: {
        menuId: '',
        menuCode: '',
        menuName: '',
        icon: 'md-document',
        path: '',
        scheme: '/',
        target: '_self',
        status: 1,
        parentId: '0',
        priority: 0,
        menuDesc: ''
      },
      data: []
    }
  },
  methods: {
    handleIconChange (icon) {
      this.formItem.icon = icon
    },
    treeSelectNormalizer (node) {
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      }
    },
    setSelectTree (data) {
      this.selectTreeData = data
    },
    setEnabled (enabled) {
      if (enabled) {
        this.handleReset()
      }
    },
    cellClickEvent ({ row, rowIndex, column, columnIndex }, event) {
      this.handleReset()
      Object.assign(this.formItem, {
        menuId: row.menuId,
        menuCode: row.menuCode,
        menuName: row.menuName,
        icon: row.icon,
        path: row.path,
        scheme: row.scheme,
        target: row.target,
        status: row.status,
        parentId: row.parentId,
        priority: row.priority,
        menuDesc: row.menuDesc
      })
    },
    handleReset () {
      const newData = {
        menuId: '',
        menuCode: '',
        menuName: '',
        icon: 'md-document',
        path: '',
        scheme: '/',
        target: '_self',
        status: '1',
        parentId: '0',
        priority: 0,
        menuDesc: ''
      }
      this.formItem = newData
      this.$refs['menuForm'].resetFields()
      this.saving = false
    },
    handleSubmit () {
      this.$refs['menuForm'].validate((valid) => {
        if (valid) {
          this.$http.post(this.$apis.menu.save, this.formItem, this).then(res => {
            this.handleReset()
            this.handleSearch()
          })
        }
      })
    },
    handleRemove () {
      this.$http.delete(this.$apis.menu.remove, {
        menuId: this.formItem.menuId
      }, this).then(res => {
        this.handleReset()
        this.handleSearch()
      })
    },
    handleSearch () {
      this.$http.get(this.$apis.menu.list, {}, this).then(res => {
        const data = res.data
        const opt = {
          key: 'menuId',
          parentKey: 'parentId',
          children: 'children'
        }
        this.data = this.$utils.toArrayTree(data, opt)
        this.selectTreeData = this.data
      })
    }
  },
  created: function () {
    this.handleSearch()
  },
  mounted: function () {
  }
}
</script>
